<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱与自由意志</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./ParticleStarrySky/style.css">
    <style>
        /* 隐藏 滚动条 */
        ::-webkit-scrollbar {
            display: none;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }

        .top-bg {
            position: relative;
            background-image: url(./img/0.jpg);
            background-size: cover;
            background-position: top;
            background-repeat: no-repeat;
            height: 100vh;
            margin-bottom: 50px;
        }

        .title {
            position: absolute;
            top: 80%;
            left: 50%;
            transform: translate(-50%, -50%) scale(1.2);
            color: white;
            padding: 10px;
            text-align: center;
            line-height: 2;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
            white-space: nowrap;

            animation: fadeIn 2s ease-in-out;
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        .content {
            padding: 20px;
            width: 65%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0 auto;
            gap: 50px;
        }

        .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 50px;
        }

        .img {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            transition: transform 0.3s ease-in-out;
        }

        .img:hover {
            transform: scale(0.9);
            box-shadow: 0 0 7px rgba(0, 0, 0, 0.7);
        }

        .text {
            font-size: 18px;
            line-height: 1.5;
            text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
        }

        /* 旋转图标样式 */
        #music-control {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            cursor: pointer;
            background-image: url(./img/music.svg);
            background-size: cover;
            animation: rotate 2s linear infinite;
            animation-play-state: paused;
            cursor: pointer;
        }

        /* 旋转动画 */
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        /* H5端适配 (≤768px) */
        @media (max-width: 768px) {
            .top-bg {
                height: 30vh;
                margin-bottom: 20px;
            }

            .title {
                top: 80%;
                transform: translate(-50%, -50%) scale(0.6);
            }

            .content {
                width: 90%;
                gap: 50px;
            }

            .container {
                gap: 0;
            }

            .img {
                width: 0;
                height: 0;
                opacity: 0;
            }

            .text {
                font-size: 18px;
            }

            #music-control {
                width: 50px;
                height: 50px;
                top: 10px;
                right: 10px;
            }
        }
    </style>
</head>

<body>
    <div class="row">
        <!-- 标题 -->
        <div class="top-bg">
            <div class="title">
                <h1>爱与自由意志</h1>
                <span class="text">我始终在探寻：爱，究竟是什么？</span>
            </div>
        </div>

        <!-- 内容 -->
        <div class="content">
            <div class="container">
                <img src="./img/1.jpg" alt="" class="img">
                <span
                    class="text">在很长一段时间里，我曾坚定地认为，爱不过是一场幻觉，是由激素驱动与社会规训共同塑造的产物。苯乙胺让人坠入爱河，多巴胺带来快乐的正反馈，去甲肾上腺素制造心跳加速的悸动，而内啡肽给予温暖与安宁......
                    仿佛我们并不存在所谓的自由意志，仿佛这一切早已被拉普拉斯妖所洞悉。<br><br>
                    可生物学只能解释人类为什么产生爱，却无法解释为什么偏偏爱上的是那个人，不是吗？或许正是因为思想反作用于物质：因为产生了爱，身体激素也因此产生这些变化。情感和思想是相互作用的，而不是全权由基因和激素做决策。
                </span>
            </div>

            <div class="container">
                <span class="text">爱是自由意志的沉沦，还是自由意志的选择？<br><br>
                    我想，爱既是感性的，也是理性的。就像尼采认为的日神精神和酒神精神是相互对立又相互依存的。<br><br>
                    我们都知道，要爱具体的人，不要爱抽象的人；要爱生活本身，胜于爱生活的意义。但即使可以从理论上说服自己，可身体的感受却是切切实实存在的，我们会害怕，会迷茫，会受伤......</span>
                <img src="./img/2.jpg" alt="" class="img">
            </div>

            <div class="container">
                <img src="./img/3.jpg" alt="" class="img">
                <span
                    class="text">追求幸福比忍受痛苦需要更大的勇气，面对爱我会手足无措，我不知道该如何面对，只是一味的逃避。正如我否认小王子世界的孤独一般，也否认自己的孤独，将灰色的世界诉说的五彩缤纷，这无不是一种麻木。
                    <br><br>我认为人类是精神上的独居动物，因此人类始终是孤独的。可我又一次次陷入自我怀疑：如果我注定孤独，为什么我不能就这样一个人苟且到死呢？却还是妄图与他人沟通试图想要得到理解？或许，是因为我害怕——害怕展露内心的幽暗，暴露我的伪善。</span>
            </div>

            <div class="container">
                <span class="text">我时常感到孤独，但又不孤独。因为我有很多很多的想法，我在脑海中创建了一个世界，可不管怎么努力，都无法改变现实。<br><br>
                    我们大部分烦恼，是来自于梦想另一种有可能的人生。把希望寄托于自己的别的可能性这种虚无缥缈的东西之上，正是万恶之源。<br><br>
                    不得不承认，幻想是最好的止痛剂，但，若我不再逃避，只是遵循我主观感受的判断，倾听我内心的声音，我想更加了解你的世界。</span>
                <img src="./img/4.jpg" alt="" class="img">
            </div>
        </div>

        <!-- 音频元素 -->
        <audio id="bg-music" src="./music/audio.mp3" autoplay></audio>

        <!-- 音乐控制按钮 -->
        <div id="music-control"></div>

        <!-- 粒子效果 -->
        <div class="particle-network-animation" style="z-index: -1;">
            <div class="glow glow-1"></div>
            <div class="glow glow-2"></div>
            <div class="glow glow-3"></div>
        </div>
    </div>

    <script src="./ParticleStarrySky/script.js"></script>
    <script>
        const music = document.getElementById('bg-music');
        const control = document.getElementById('music-control');

        // 自动播放处理
        document.addEventListener('DOMContentLoaded', () => {
            music.play().catch(error => {
                console.log('自动播放被阻止，请点击图标启动播放');
            });
        });

        // 控制播放状态
        control.addEventListener('click', () => {
            if (music.paused) {
                music.play();
            } else {
                music.pause();
            }
        });

        // 同步动画状态
        music.addEventListener('play', () => {
            control.style.animationPlayState = 'running';
        });

        music.addEventListener('pause', () => {
            control.style.animationPlayState = 'paused';
        });
    </script>
</body>

</html>